<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/pagination.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
    <base href="http://localhost:8080/atcrowdfunding02/">
    <script th:src="@{/jquery/jquery-2.1.1.min.js}"></script>
    <script th:src="@{/jquery/jquery.pagination.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/script/docs.min.js}"></script>
    <script th:src="@{/ztree/jquery.ztree.all-3.5.min.js}"></script>
    <script th:src="@{/crowd/my-role.js}"></script>
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <script type="text/javascript">
        $(function () {
            $(".list-group-item").click(function () {
                if ($(this).find("ul")) {
                    $(this).toggleClass("tree-closed");
                    if ($(this).hasClass("tree-closed")) {
                        $("ul", this).hide("fast");
                    } else {
                        $("ul", this).show("fast");
                    }
                }
            });
            // 1.为分页操作准备初始化数据
            window.pageNum = 1;
            window.pageSize = 5;
            window.keyword = "";
            // 2. 调用分页函数，实现分页效果
            generatePage();
            //搜索的单击响应函数
            $("#search").click(function () {
                let val = $("#searchVal").val();
                window.keyword = val;
                generatePage();
            });
            //显示模态框
            $("#addRole").click(function () {
                $("#addModal").modal("show");
            });
            //保存角色的单击响应函数
            $("#saveRoleBtn").click(function () {
                let roleName = $("#inputSuccess4").val();
                $.ajax({
                    "url": "role/save",
                    "type": "post",
                    "data": {
                        "name": roleName
                    },
                    "dataType": "json",
                    "success": function (response) {
                        if (response.operationResult == "SUCCESS") {
                            layer.msg("添加成功！")
                            window.pageNum = 999999;
                            generatePage();
                        }
                        if (response.operationResult != "SUCCESS") {
                            layer.msg("添加失败！" + response.operationMessage);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
                });
                //关闭模态框
                $("#addModal").modal("hide");
                //清除模态框信息
                $("#inputSuccess4").val("");
            });

            //给“铅笔”按钮绑定单击响应函数
            $("#pageBody").on("click", ".pencilBtn", function () {

                //打开模态框
                $("#updateModal").modal("show");

                var roleName = $(this).parent().prev().text();

                //获取要更新的角色id
                window.roleId = this.id;

                $("#inputSuccess5").val(roleName);

            });

            //给更新按钮绑定单击响应函数
            $("#updateRoleBtn").click(function () {
                var roleName = $("#inputSuccess5").val();
                $.ajax({
                    "url": "role/update",
                    "type": "post",
                    "data": {
                        "id": window.roleId,
                        "name": roleName
                    },
                    "dataType": "json",
                    "success": function (response) {
                        if (response.operationResult == "SUCCESS") {
                            layer.msg("修改成功！")
                            generatePage();
                        }
                        if (response.operationResult != "SUCCESS") {
                            layer.msg("修改失败！" + response.operationMessage);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
                });
                // ③关闭模态框
                $("#updateModal").modal("hide");
            });

            //给“删除”按钮绑定单击响应函数
            $("#pageBody").on("click", ".removeBtn", function () {
                //获取要删除的id和姓名
                var roleId = this.id;
                var roleName = $(this).parent().prev().text();
                //将role对象封装进数组
                var roleArray = [{"roleId": roleId, "roleName": roleName}];
                //打开模态框
                showRemoveModal(roleArray);
            });

            //给确认删除按钮绑定单击响应函数
            $("#removeRoleBtn").click(function () {
                var requestBody = JSON.stringify(window.roleIdArray);
                $.ajax({
                    "url": "role/remove/by/array",
                    "type": "post",
                    "data": requestBody,
                    "contentType": "application/json;charset=utf-8",
                    "dataType": "json",
                    "success": function (response) {
                        if (response.operationResult == "SUCCESS") {
                            layer.msg("删除成功！")
                            generatePage();
                        }
                        if (response.operationResult != "SUCCESS") {
                            layer.msg("删除失败！" + response.operationMessage);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
                });
                //关闭模态框
                $("#removeModal").modal("hide");
            });

            //给取消按钮绑定
            $("#cancelBtn").click(function () {
                //关闭模态框
                $("#removeModal").modal("hide");
            });
            //全选、全不选
            $("#sumBox").click(function () {
                let status = this.checked;

                $(".itemBtn").prop("checked", status);
            });
            //全部选中全选按钮也选中
            $("#pageBody").on("click", ".itemBtn", function () {
                //选中的个数
                let checkedCount = $(".itemBtn:checked").length;
                //总共的个数
                let totalCount = $(".itemBtn").length;
                //更新全选框的状态
                $("#sumBox").prop("checked", checkedCount == totalCount);
            });

            //给批量删除按钮绑定单击响应函数
            $("#batchRemoveBtn").click(function () {
                var roleArray = [];
                $(".itemBtn:checked").each(function () {
                    var roleId = this.id;
                    var roleName = $(this).parent().next().text();

                    roleArray.push({"roleId": roleId, "roleName": roleName});
                });

                if ($(".itemBtn:checked").length === 0) {
                    layer.msg("至少选择一个进行删除!");
                    return;
                }
                //执行批量删除操作
                showRemoveModal(roleArray);
            });

            $("#pageBody").on("click", ".checkBtn", function () {
                $("#assignModal").modal("show");
                window.roleId = this.id;
                fillAuthTree();
            });

            $("#assignBtn").click(function () {

                var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");
                //获取选中的节点
                var checkedNodes = zTreeObj.getCheckedNodes();
                //声明一个数组存放authId
                var authIdArray = [];
                for (var i = 0; i < checkedNodes.length; i++) {
                    var authId = checkedNodes[i].id;
                    authIdArray.push(authId);
                }
                // ②发送请求执行分配
                var requestBody = {
                    "authIdArray": authIdArray,
                    // 为了服务器端 handler 方法能够统一使用 List<Integer>方式接收数据，roleId 也存 入数组
                    "roleId": [window.roleId]
                };
                $.ajax({
                    "url": "assign/auth/to/role",
                    "type": "post",
                    "data": JSON.stringify(requestBody),
                    "contentType": "application/json;charset=utf-8;",
                    "dataType": "json",
                    "success": function (response) {
                        var result = response.operationResult;
                        if (result == "SUCCESS") {
                            layer.msg("操作成功！");
                        }
                        if (result == "FAILED") {
                            layer.msg("操作失败！" + response.operationMessage);
                        }
                    }, "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
                });
                $("#assignModal").modal("hide");
            });

        });
    </script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" th:href="@{/role/to/page}">众筹平台 - 角色维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle"
                                data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i> <span th:text="${session.loginAdmin.userName}"/>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                            <li class="divider"></li>
                            <li><a th:href="@{/admin/do/logout}"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                        </ul>
                    </div>
                </li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign"></span> 帮助
                    </button>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <ul style="padding-left:0px;" class="list-group">
                    <li class="list-group-item tree-closed">
                        <a th:href="@{/admin/to/main}"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
                    </li>
                    <li class="list-group-item">
                        <span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge"
                                                                                             style="float:right">3</span></span>
                        <ul style="margin-top:10px;">
                            <li style="height:30px;">
                                <a th:href="@{/admin/get/page}"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
                            </li>
                            <li style="height:30px;">
                                <a th:href="@{/role/to/page}" style="color:red;"><i
                                        class="glyphicon glyphicon-king"></i> 角色维护</a>
                            </li>
                            <li style="height:30px;">
                                <a th:href="@{/menu/to/page}"><i class="glyphicon glyphicon-lock"></i> 菜单维护</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge"
                                                                                style="float:right">3</span></span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
                            </li>
                            <li style="height:30px;">
                                <a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
                            </li>
                            <li style="height:30px;">
                                <a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
                            </li>
                            <li style="height:30px;">
                                <a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
                            </li>
                            <li style="height:30px;">
                                <a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
                            </li>
                            <li style="height:30px;">
                                <a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed">
                        <a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" id="searchVal" type="text"
                                       placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" id="search" class="btn btn-warning"><i
                                class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button type="button" id="batchRemoveBtn" class="btn btn-danger"
                            style="float:right;margin-left:10px;"><i
                            class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" id="addRole" class="btn btn-primary" style="float:right;">
                        <i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">id</th>
                                <th width="30"><input id="sumBox" type="checkbox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="pageBody">
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="addModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增角色</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input type="text" name="roleName"
                               class="form-control" id="inputSuccess4"
                               placeholder="请输入角色名称" autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="saveRoleBtn" type="button" class="btn btn-primary"> 保 存
                </button>
            </div>
        </div>
    </div>
</div>
<div id="updateModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改角色信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-signin" role="form">
                    <div class="form-group has-success has-feedback">
                        <input type="text" name="roleName"
                               class="form-control" id="inputSuccess5"
                               placeholder="请输入角色名称" autofocus>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="updateRoleBtn" type="button" class="btn btn-primary"> 修 改
                </button>
            </div>
        </div>
    </div>
</div>
<div id="removeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">删除角色</h4>
            </div>
            <div class="modal-body">
                <h4>确定删除下列角色吗？</h4>
                <div id="removeSpan" style="text-align: center"></div>
            </div>
            <div class="modal-footer">
                <button id="cancelBtn" type="button" class="btn btn-primary"> 取消
                </button>
                <button id="removeRoleBtn" type="button" class="btn btn-primary"> 确认删除
                </button>
            </div>
        </div>
    </div>
</div>
<div id="assignModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改角色权限</h4>
            </div>
            <div class="modal-body">
                <ul id="authTreeDemo" class="ztree"></ul>
            </div>
            <div class="modal-footer">
                <button id="assignBtn" type="button" class="btn btn-primary">好的，我设置好了！执行分配！</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
